import { useDrag } from "react-dnd";
/* 一些可以不写在函数式组件内的变量和方法 */
export interface MaterailItemProps {
    name: string,
    desc: string;
}

export function MaterailItem(props: MaterailItemProps) {
    /* props变量书写区 */
    const {name, desc} = props;
    /* hooks变量书写区 */ 
    const [_, drag] = useDrag({
        type: name, // type是接头暗号，drop时根据type字段来决定是否接受drop
        item: { // item是drag时携带传递的数据
            type: name
        }
    })
    /* 非hooks变量书写区 */ 

    /* 方法书写区 */ 

    /* 生命周期书写区 */ 

    /* DOM结构书写区 */ 
    return (
        <div ref={drag} className="
                py-[8px]
                px-[10px]
                m-[10px]
                cursor-move
                inline-block
                bg-white
                hover:bg-[#ccc]
                border-[#000]
                border-dashed 
                border-[1px]">
            {desc}
        </div>
    )
}